<template>
  <a-form layout="horizontal" :form="form" class="form" >
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="所属字段" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'dictField',
              {rules: [{ required: true, message: '请输入所属字段', whitespace: true}], initialValue: this.initData.dictField}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="字段名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'fieldName',
              {rules: [{ required: true, message: '请输入字段名称', whitespace: true}], initialValue: this.initData.fieldName}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'status',
              {rules: [{ required: true, message: '请输入状态', whitespace: true}], initialValue: this.initData.status}
            ]"
          >
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="字典属性" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'dictKey',
              {rules: [{ required: true, message: '请输入字典属性', whitespace: true}], initialValue: this.initData.dictKey}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="字典属性名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'dictValue',
              {rules: [{ required: true, message: '请输入字典属性名称', whitespace: true }], initialValue: this.initData.dictValue}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="是否可编辑" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'fixed',
              {rules: [{ required: true, message: '请输入是否可编辑', whitespace: true}], initialValue: this.initData.fixed}
            ]"
          >
            <a-select-option value="0">否</a-select-option>
            <a-select-option value="1">是</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="父字段" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            showSearch
            placeholder="请选择"
            allowClear
            :filterOption="filterOption"
            @change="handleParentFieldChange"
            v-decorator="[
              'parentField',
              {rules: [{ required: false, message: '请输入父字段', whitespace: true}], initialValue: this.initData.parentField}
            ]"
          >
            <a-select-option v-for="item in dictDataField.fieldData" :key="item.dictField" :value="item.dictField">{{ item.dictField }}-{{ item.fieldName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="父字典属性" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            showSearch
            placeholder="请选择"
            allowClear
            :filterOption="filterOption"
            @change="handleParentKeyChange"
            v-decorator="[
              'parentKey',
              {rules: [{ required: false, message: '请输入父字典属性', whitespace: true}], initialValue: this.initData.parentKey}
            ]"
          >
            <a-select-option v-for="item in dictDataField.keyData" :key="item.dictKey" :value="item.dictKey">{{ item.dictKey }}-{{ item.dictValue }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'classify',
              {rules: [{ required: false, message: '请输入所属分类', whitespace: true }], initialValue: this.initData.classify}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="所属组织" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            showSearch
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            allowClear
            treeDefaultExpandAll
            treeNodeFilterProp="title"
            :treeData="orgSelectTreeData"
            @search="onSearchOrgSelectTree"
            @select="onSelectOrgSelectTree"
            v-decorator="[
              'orgId',
              {rules: [{ required: false, message: '请输入所属组织', whitespace: true}], initialValue: this.initData.orgId}
            ]"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            showSearch
            style="width: 100%"
            treeNodeFilterProp="value"
            showIcon
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            allowClear
            :treeData="iconSelectTreeData"
            @search="onSearchIconSelectTree"
            v-decorator="[
              'icon',
              {rules: [{ required: false, message: '请输入图标', whitespace: true}], initialValue: this.initData.icon}
            ]"
          >
            <span slot="title" slot-scope="{key, value}">
              <a-icon :type="key"/> {{ value }}
            </span>
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%"
            v-decorator="[
              'orderNo',
              {rules: [{ type: 'number', required: false, message: '请输入排序', whitespace: true}], initialValue: this.initData.orderNo}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="备注" :labelCol="{xs: { span: 24 },sm: { span: 3 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'remarks',
              {rules: [{ required: false, message: '请输入备注', whitespace: true}], initialValue: this.initData.remarks}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="字典ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            disabled
            v-decorator="[
              'sysId',
              {rules: [{  required: false, message: '请输入字典Id', whitespace: true}], initialValue: this.initData.sysId}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="级别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%"
            v-decorator="[
              'rate',
              {rules: [{ type: 'number', required: false, message: '请输入级别', whitespace: true}], initialValue: this.initData.rate}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { getOrgSelectTree, getIconSelectTree, getDict,getDictField } from "@/services/system/api"
import moment from 'moment'
import modal from 'ant-design-vue/es/modal'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      dictData: {},
      orgSelectTreeData: [],
      form: this.$form.createForm(this),
      initData: {},
      iconSelectTreeData: [],
      dictDataField: {}
    }
  },
  props: {
    dictInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    // 数据字典初始化
    let parentField = null
    if (this.dictInfo) {
      this.initData = this.dictInfo
      parentField = this.dictInfo.parentField
    } else {
      this.initData = {}
    }
    // 数据字典初始化
    const params = {}
    params.dictField = parentField
    this.$http.post(getDictField,params).then(res => {
      this.dictDataField = res.result
    })
    const orgParams = {}
    // 下拉组织树初始化
    this.$http.post(getOrgSelectTree,orgParams).then(res => {
      this.orgSelectTreeData = res.result
    })
    // 下拉图标初始化
    const iconParams = {}
    this.$http.post(getIconSelectTree,iconParams).then(res => {
      this.iconSelectTreeData = res.result
    })
  },
  methods: {
    moment,
    onSearchOrgSelectTree () {
      console.log(...arguments)
    },
    onSearchIconSelectTree () {
      console.log(...arguments)
    },
    onSelectOrgSelectTree () {
      console.log(...arguments)
    },
    handleParentFieldChange (value) {
      const params = {}
      params.dictField = value
      this.$http.post(getDict,params).then(res => {
        this.dictDataField.keyData = res.result
        const data = {}
        data.parentKey = null
        this.form.setFieldsValue(data)
      })
    },
    handleParentKeyChange (value) {
      const dictKey = this.form.getFieldValue('dictKey')
      const dictField = this.form.getFieldValue('dictField')
      const parentField = this.form.getFieldValue('parentField')
      const data = {}
      data.parentKey = null
      setTimeout(() => {
        if (!dictField) {
          modal.warn({ title: '提示', content: '请先输入所属字段' })
          this.form.setFieldsValue(data)
          return false
        }
        if (!dictKey) {
          modal.warn({ title: '提示', content: '请先输入字典值' })
          this.form.setFieldsValue(data)
          return false
        }
        if (!parentField) {
          modal.warn({ title: '提示', content: '请先输入父字段' })
          this.form.setFieldsValue(data)
          return false
        }
        if (parentField === dictField) {
          if (dictKey === value) {
            modal.warn({ title: '提示', content: '不能选择自己作为父字典值' })
            this.form.setFieldsValue(data)
          }
        }
      }, 20)
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
